<template>
    <div>
        <Row >
            <Col span="4">
                <div class="sidebar">
                    <div class="menu-bar">
                        <h3>帮助中心</h3>
                    </div>
                    <div class="menu">
                        <Menu :theme="theme2" width="auto" @on-select="handleSelect" :active-name="active_name" :open-names="open_names" >
                            <Submenu v-for="item in help_types" :name="item.name">
                                <template slot="title">
                                    <Icon type="stats-bars"></Icon>
                                    <span>{{item.name}}</span>
                                </template>
                                    <MenuItem v-for="item2 in helperList" v-if="item2.hd_type == item.name" :name="item2.id">{{item2.title}}</MenuItem>
                            </Submenu>
                        </Menu>
                    </div>
                </div> 
            </Col>
            <Col span="18" offset="2">
                <Row><Col offset="18" span="6">
                    <Select v-model="search" filterable @on-change="handleSelect">
                        <Option v-for="(option, index) in options" :value="option.id" :key="index">{{option.title}}</Option>
                    </Select>
                </Col></Row>
                <router-view></router-view>
            </Col>
        </Row>
    </div>
</template>

<script>
import HelpDocument from "@/common/model/HelpDocument";

export default {
    data(){
        return{
            search: "",
            theme2:'light',
            open_names: [],
            active_name: "",
            helperList: [],
        }
    },
    computed: {
        help_types() {
            return this.$store.state.app.dicTree.help.children;
        },
        options() {
            var temp = [];
            this.helperList.forEach( item => {
                if(item.title.match(this.search)) temp.push(item);
            })
            return temp;
        }
    },
    methods: {
        handleSelect(id) {
            for(var i = 0, len = this.helperList.length; i < len; i++) {
                var temp = this.helperList[i];
                if(temp.id == id) {
                    this.open_name = [temp.hd_type];
                    this.active_name = id;
                    this.$router.push({ name: "help_detail", params: { id: id } });
                    break;
                }
            }
        }
    },
    created() {
        // 从服务器拿到所有帮助
        this.api.post("search/help_document", null, res => {
            this.helperList = HelpDocument.parseList(res.page.list);
            if(!this.$route.params.id && this.helperList.length > 0) {
                this.handleSelect(this.helperList[0].id);
            }
        });
    }
};
</script>
<style scoped>
.sidebar{
    position: relative;
    top: -50px;
}
.sidebar .menu-bar{
    width: 120%;
    height: 60px;
    background-color: #143f87;

}
.sidebar .menu{
    width: 120%;
    border-left:10px solid #143f87;
}
.sidebar .menu-bar h3{
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    color: white;
}
.bar{
    width: 100%;
    height: 20px;
    background-color: #143f87;
}
.content {
    border-bottom: 1px solid #cccccc;
    font-size:25px;
    padding: 5px 0 2px;
}
</style>
